<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <script src="../static/js/axios-0.18.0.js"></script>
    <script src="../static/plugins/echarts/echarts.js"></script>
    <script src="../static/js/vue.js"></script>
    <link href="../static/css/style.css" rel="stylesheet">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.js"></script>
    <style>
        .el-header {
            background-color: #ffffff;
            text-align: center;
            line-height: 80px;
            padding-top: 10px;
        }

        .el-main {
            color: #333;
            text-align: center;
            height: auto;
            margin: 0px;
            padding: 0px;
            width: 100%;
        }

        a:link {
            text-decoration: none;
            color: #53a100;
        }

        a:visited {
            text-decoration: none;
            color: #4cae4c;
        }

        a:hover {
            text-decoration: none;
            color: #82fa1b;
        }

        a:active {
            text-decoration: none;
            color: #015306;
        }

        a {
            font-size: 20px;
        }

        .imputStyle {
            padding-top: 9px;
            text-align: center;
            height: 4rem;
            border: 1px solid #4cae4c;
            line-height: 48px;
            border-radius: 20px;
            outline: none;
            font-size: 15px;
        }

        .ps-badge {
            display: inline-block;
            position: absolute;
            margin-top: 0;
            margin-left: 0;
            width: 80px;
            height: 35px;
            z-index: 10;
            background-color: #2AC37D;
        }

        .ps-badge > span {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-family: "Montserrat", sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: #efefef;
        }
    </style>
</head>
<body style="width: 100%;margin: 0px;padding: 0px;">
<div id="app">
    <div class="el-header">
        <el-col :span="8">
            <div class="grid-content bg-purple" style="float: left">
                <a href="/"><img height="70px" width="200px" src="../static/pic/logo.jpg"/></a>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="grid-content bg-purple">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1"><a href="/" style="color: #4cae4c">首页</a>
                    </el-menu-item>
                    <el-menu-item index="2"><a href="/commolist/commolist" style="color: #4cae4c">二手商品</a>
                    </el-menu-item>
                    <el-menu-item index="3"><a href="/commolist/news" style="color: #4cae4c">网站公告</a>
                    </el-menu-item>
                    <el-menu-item index="4"><a href="/commolist/feedback" style="color: #4cae4c">联系我们</a>
                    </el-menu-item>
                </el-menu>
            </div>
        </el-col>
        <el-col :span="4">
            <div style="">
                <input @keyup.enter="findall" class="imputStyle" v-model="inputString" placeholder="请输入..."/>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="grid-content bg-purple-light right" style="float: right" v-if="islogin">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-submenu>
                        <template slot="title">
                            <el-avatar
                                    :src="userimage"></el-avatar>
                            {{username}}
                        </template>
                        <a href="/user/centre" target="_blank">
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                        </a>
                        <el-menu-item index="2-3" @click="quit">退出</el-menu-item>
                    </el-submenu>
                </el-menu>

            </div>
            <div class="el-menu-demo" style="float: right; text-align: center" v-else>
                <a href="/login">登陆&注册</a>
            </div>
        </el-col>
    </div>
    <div style="height: 10px;background-color: #ffffff"></div>
    <div class="el-main" style="width: 100%;height: auto">
        <template>
            <div style="padding: 0px">
                <el-carousel height="800px" width="100%" margin="0px" padding="0px">
                    <el-carousel-item v-for="item in pics" :key="item.url">
                        <img style="width: 100%; height: 800px" :src="item.url"/>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </template>
        <!--热门商品8个-->
        <template>
            <div id="hottitle" style="width: 90%; padding-top: 20px;">
                <span style="font-size: 30px;color: #4cae4c;padding-right: 1200px"><i
                        class="el-icon-minus">热门商品</i></span>
            </div>
            <div style="width: 80%; margin: 0 auto; padding-top: 20px">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="item in dataList" :key="item.id" id="commo">
                        <div @click="detail(item.commid)" v-loading.fullscreen.lock="fullscreenLoading"
                             class="demo-image__placeholder" style="padding-top: 30px;margin-right: 20px;">
                            <div class="block" style="width: 300px;height: 350px; border: 1px solid #4cae4c">
                                <img :src="item.image" style="width: 250px;height: 300px"/><br/>
                                <el-tooltip class="item" effect="light" :content="item.commname" placement="top-start"
                                            style="width: 400px">
                                    <span>{{item.commname.substring(0, 16)}}...</span>
                                </el-tooltip>
                                </br>
                                <span style="color: #4cae4c;font-size: 20px">￥{{item.thinkmoney}}</span>
                                <span style="color: #5e5e5e;font-size: 10px">原价{{item.orimoney}}</span>
                            </div>

                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </div>
    <div style="height: 30px;background-color: #ffffff"></div>
    <!--最新商品-->
    <div id="two" class="el-main" style="width: 100%;height: auto">
        <template>
            <div style="padding: 0px;height: 400px;margin: 0px;padding: 0px">
                <img style="width: 100%; height: 400px" :src="pics2"/>
            </div>
        </template>
        <template>
            <div id="newtitle" style="width: 90%; padding-top: 20px;">
                <span style="font-size: 30px;color: #4cae4c;padding-right: 1200px"><i
                        class="el-icon-minus">最新商品</i></span>
            </div>
            <div style="width: 80%; margin: 0 auto; padding-top: 20px">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="item in newList" :key="item.id" id="commo">
                        <div @click="detail(item.commid)" v-loading.fullscreen.lock="fullscreenLoading"
                             class="demo-image__placeholder" style="padding-top: 30px;margin-right: 20px;">
                            <div class="block" style="width: 300px;height: 350px; border: 1px solid #4cae4c">
                                <div class="ps-badge"><span>New</span></div>
                                <img :src="item.image" style="width: 250px;height: 300px"/><br/>
                                <el-tooltip class="item" effect="light" :content="item.commname" placement="top-start"
                                            style="width: 400px">
                                    <span>{{item.commname.substring(0, 16)}}...</span>
                                </el-tooltip>
                                </br>
                                <span style="color: #4cae4c;font-size: 20px">￥{{item.thinkmoney}}</span>
                                <span style="color: #5e5e5e;font-size: 10px;text-decoration:line-through;">原价{{item.orimoney}}</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </div>
    <div style="height: 30px;background-color: #ffffff"></div>
    <div id="three" style="width: 100%;height: auto">
        <!--最新公告-->
        <template>
            <div id="gonggaotitle" style="width: 90%; padding-top: 20px;">
                <span style="font-size: 30px;color: #4cae4c;margin-left: 180px"><i class="el-icon-minus">最新公告</i></span>
            </div>
            <div style="width: 80%; margin: 0 auto; padding-top: 20px">
                <el-row :gutter="20">
                    <el-col :span="8" v-for="item in noticeList" :key="item.id" id="commo">
                        <div @click="noticedetail(item)" v-loading.fullscreen.lock="fullscreenLoading"
                             class="demo-image__placeholder"
                             style="padding-top: 30px;margin-right: 20px;width: 400px;height: 350px;">
                            <div class="block" style="width: 400px;height: 350px;">
                                <div class="ps-badge"><span>New</span></div>
                                <img :src="item.image" style="width: 450px;height: 350px"/><br/>
                                <div style="text-align: left;font-size: 20px;color: #2b542c; width: 400px;height: auto;">
                                    {{item.newstitle}}
                                </div>
                                <div style="text-align: left;font-size: 10px;color: #5e5e5e; width: 400px;height: auto;">
                                    -By:{{item.username}}-{{item.createtime}}
                                </div>
                                <div style="text-align: left;font-size: 10px;color: #5e5e5e; width: 400px;height: auto;">
                                    {{item.newsdesc}}
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </div>
    <div style="height: 150px;background-color: #ffffff"></div>
    <!--最底部-->
    <div style="width: 100%;height: auto;background-color: #222222">
        <div class="ps-footer__content">
            <div class="ps-container">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--info">
                            <header><a class="ps-logo" href="/"><img src="../static/pic/logo.jpg"
                                                                     alt=""></a>
                                <h3 class="ps-widget__title">Address Office 1</h3>
                            </header>
                            <footer>
                                <p><strong>460 West 34th Street, 15th floor, New York</strong></p>
                                <p>Email: <a href='mailto:support@store.com'>nanyangligong@nyist.com</a></p>
                                <p>Phone: +323 32434 5334</p>
                                <p>Fax: ++323 32434 5333</p>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--info second">
                            <header>
                                <h3 class="ps-widget__title">Address Office 2</h3>
                            </header>
                            <footer>
                                <p><strong>PO Box 16122 Collins Victoria 3000 Australia</strong></p>
                                <p>Email: <a href='mailto:support@store.com'>nanyangligong@nyist.com</a></p>
                                <p>Phone: +323 32434 5334</p>
                                <p>Fax: ++323 32434 5333</p>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Find Our store</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--link">
                                    <li><a href="#">Coupon Code</a></li>
                                    <li><a href="#">SignUp For Email</a></li>
                                    <li><a href="#">Site Feedback</a></li>
                                    <li><a href="#">Careers</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Get Help</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--line">
                                    <li><a href="#">Order Status</a></li>
                                    <li><a href="#">Shipping and Delivery</a></li>
                                    <li><a href="#">Returns</a></li>
                                    <li><a href="#">Payment Options</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Products</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--line">
                                    <li><a href="#">Shoes</a></li>
                                    <li><a href="#">Clothing</a></li>
                                    <li><a href="#">Accessries</a></li>
                                    <li><a href="#">Football Boots</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 公告详情弹层 -->
    <div class="news">
        <el-dialog title="公告详情" :visible.sync="dialogFormVisible4Desc">
            <div style="text-align: center;font-size: 25px;color: #2b542c">{{newdesc.newstitle}}</div>
            <div style="text-align: center;font-size: 10px;color: #5e5e5e;margin-top: 10px;">
                By:{{newdesc.username}}-Time:{{newdesc.createtime}}
            </div>
            <div style="text-align: left;width: 80%;height: auto; font-size: 20px;color: #000000;margin-top: 10px;margin-left: 90px">
                {{newdesc.newscontent}}
            </div>
        </el-dialog>
    </div>
    <!--回到最顶部-->
    <el-backtop>
            <div style="{
                    height: 100%;
                    width: 100%;
                    background-color: #f2f5f6;
                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                    text-align: center;
                    line-height: 40px;
                    color: #4cae4c;}">
                <i class="el-icon-caret-top"></i>
                UP
            </div>
        </el-backtop>
</div>

</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            inputString: "",
            islogin: false,
            username: "",
            dialogFormVisible4Desc: false,
            userimage: "",
            pics: [
                {url: "../static/pic/3.jpg"},
                {url: "../static/pic/4.jpg"},
            ],
            pics2: "../static/pic/1.jpg",
            fit: "cover",
            dataList: [],
            newList: [],
            noticeList: [],
            newdesc: {},
            fullscreenLoading: false,
        },
        created() {
            //判断是否登陆
            this.getname();
            this.hotComm();
        },
        methods: {
            findall() {
                //搜索
                //跳转页面
                window.open("/commodity/lookfor?inputString=" + this.inputString);
            },
            getname() {
                //获取用户信息
                axios.post("/user/getusermess").then((res) => {
                    this.username = res.data.data.username;
                    this.userimage =res.data.data.uimage;
                    this.islogin = res.data.flag;
                })
            },
            //退出
            quit() {
                axios.post("/user/quit").then((res) => {
                    this.$message.success(res.data.message);
                    //跳转页面
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                        location.href = "/";
                    }, 2000);
                }).catch(() => {
                    this.$message.error("退出失败");
                })
            },
            //查找热门商品和最新商品和最行公告
            hotComm() {
                axios.post("/commodity/hotcomm").then((res) => {
                    if (res.data.flag) {
                        this.dataList = res.data.data.hotcomm;
                        this.newList = res.data.data.newcomm;
                        this.noticeList = res.data.data.newnews;
                    }
                })
            },
            //公告详情
            noticedetail(noticedata) {
                this.dialogFormVisible4Desc = true;
                this.newdesc = JSON.parse(JSON.stringify(noticedata));
            },
            //跳转详情
            detail(commid) {
                //跳转页面
                window.open("/commodity/detail/" + commid, '_blank');
            }
        },

    })
</script>
</html>